<template>
  <div class="comments-section">
    <div class="comments-header">
      <div class="title">网友评价 <span class="count">({{ comments.length }})</span></div>
      <div class="more-link">查看更多 ></div>
    </div>
    <div class="comment-list">
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-header">
          <span class="user-name">等日落</span>
          <span class="comment-time">{{ comment.time }}</span>
        </div>
        <div class="rating-row">
          <el-rate v-model="comment.rating" disabled show-score text-color="#ff9f1c" />
        </div>
        <div class="comment-content">{{ comment.content }}</div>
      </div>
      <div v-if="comments.length === 0" class="empty-comment">
        <el-empty description="暂无评价" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const STORAGE_KEY = 'user_reviews'
const comments = ref([])

onMounted(() => {
  // 从localStorage获取评论数据
  const savedReviews = localStorage.getItem(STORAGE_KEY)
  if (savedReviews) {
    comments.value = JSON.parse(savedReviews)
  }
})
</script>

<style scoped>
.comments-section {
    max-width: 1110px;
    margin: 0 auto;  /* 添加水平居中 */
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-top: 20px;
    min-height: 200px; /* 保证即使没有评论也有一定高度 */
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.count {
  color: #666;
  font-weight: normal;
}

.more-link {
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.more-link:hover {
  color: #ff9f1c;
}

.comment-list {
  width: 100%;
}

.comment-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.rating-row {
  margin-bottom: 10px;
}

.comment-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.empty-comment {
  padding: 40px 0;
  text-align: center;
}

:deep(.el-rate) {
  display: inline-block;
}

:deep(.el-rate__text) {
  color: #ff9f1c;
  font-size: 14px;
}
</style> 